<template>
  <view class="wrap">
    <view class="status"></view>
    <view class="tab">
      <view class="item" @click="goLike">
        <view class="icon" style="width: 70rpx; height: 63rpx;">
          <image src="../../../static/thumbs.png" class="img"></image>
          <uv-badge type="error" numberType="overflow" max="99" :value="badgeObj.praise_count" absolute :offset="[0, '-40rpx']"></uv-badge>
        </view>
        <view class="font">获赞</view>
      </view>
      <view class="item" @click="goApproval">
        <view class="icon" style="width: 52rpx; height: 66rpx;">
          <image src="../../../static/approval.png" class="img"></image>
          <uv-badge type="error" numberType="overflow" max="99" :value="badgeObj.examine_count" absolute :offset="[0, '-40rpx']"></uv-badge>
        </view>
        <view class="font">审批</view>
      </view>
      <view class="item" @click="goUpdata">
        <view class="icon" style="width: 69rpx; height: 66rpx;">
          <image src="../../../static/bell.png" class="img"></image>
          <uv-badge type="error" numberType="overflow" max="99" :value="badgeObj.update_count" absolute :offset="[0, '-40rpx']"></uv-badge>
        </view>
        <view class="font">更新通知</view>
      </view>
      <view class="item" @click="goSystem">
        <view class="icon" style="width: 57rpx; height: 67rpx;">
          <image src="../../../static/system.png" class="img"></image>
          <uv-badge type="error" numberType="overflow" max="99" :value="badgeObj.sys_count" absolute :offset="[0, '-40rpx']"></uv-badge>
        </view>
        <view class="font">系统消息</view>
      </view>
    </view>
    <view class="list">
      <view class="item" v-if="answerTotal" @click="goAnswer">
        <view class="badgeBox">
          <view class="left">
            <image src="../../../static/logo.png" mode="aspectFill" class="img"></image>
          </view>
          <uv-badge type="error" numberType="overflow" max="99" :value="answerTotal" absolute :offset="[0, '-10rpx']"></uv-badge>
        </view>
        <view class="right">
          <view class="name">邀请回答问题</view>
          <view class="content">群成员向你提出的问题</view>
        </view>
      </view>
      
      <view class="item" v-for="(item,index) in list" :key="index" @click="goTheme(item)">
        <view class="left">
          <image :src="setUrl(item.sender.avatar)" mode="aspectFill" class="img"></image>
        </view>
        <view class="right">
          <view class="head">
            <text class="name">{{ item.sender.nickname }} {{ item.action == 1 ? '评论' : '回复' }}：</text>
            <text class="content">{{ item.comment_info.content }}</text>
          </view>
          <view class="desc" v-if="item.action == 1">{{ item.target_content }}</view>
          <view class="desc" v-else>{{ item.comment_info.pcomment.content }}</view>
          <view class="foot">
            <view class="time">{{ timeFormat(item.createtime, 'yyyy-mm-dd hh:MM') }}</view>
            <view class="group">{{ item.association.name }}</view>
          </view>
        </view>
      </view>
    </view>
    <uv-empty :show='showLeng && answerTotal == 0' mode="list" marginTop='200rpx'></uv-empty>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onShow, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
import { post } from '@/api';
import { setUrl } from '@/common';
import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';

let badgeObj = ref({});
let answerTotal = ref(0);
let list = ref([]);
let total = 0;
let last_page = 0;
let page = 1;
let limit = 15;
let showLeng = ref(false);

onShow(() => {
  getRead();
  getAnswerList()
  page = 1;
  list.value = [];
  getList();
})
// 下拉刷新
onPullDownRefresh(() => {
  page = 1
  list.value = [];
  getAnswerList()
  getList();
  setTimeout(() => {
    uni.stopPullDownRefresh()
  }, 1000)
})
// 上拉加载
onReachBottom(async () => {
  if(last_page < page || last_page == page) return;
  page++
  loading();
  await getList();
  uni.hideLoading();
})

// 获取邀请回答问题列表
function getAnswerList(){
  const params = {
    page: 1,
    limit: 15,
    solve_status: 2
  }
  post('api/association_question/inviteAnswerQuestionList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      answerTotal.value = data.total;
    }
  })
}
// 获取消息列表
function getList(){
  const params = {
    page,
    limit,
    target_type: 0
  }
  post('api/message_comment/getMessageList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      last_page = data.last_page;
      total = data.total;
      data.data.forEach(e => {
        e.my_type = 2;
      })
      list.value = [...list.value, ...data.data];
      if(list.value.length){
        showLeng.value = false;
      }else{
        showLeng.value = true;
      }
    }
  })
}
// 获取未读消息
function getRead(){
  post('api/message/homeMessage').then(res => {
    if(res.code == 1){
      const data = res.data;
      badgeObj.value = data;
    }
  })
}
function goTheme(row){
  uni.navigateTo({
    url: `/pages/group/themeDetail?id=${row.target_id}`
  });
}
function goApproval(){
  uni.navigateTo({
    url: '/pages/mine/message/approval'
  });
}
function goSystem(){
  uni.navigateTo({
    url: '/pages/mine/message/system'
  });
}
function goUpdata(){
  uni.navigateTo({
    url: '/pages/mine/message/updata'
  });
}
function goLike(){
  uni.navigateTo({
    url: '/pages/mine/message/like'
  });
}
function goAnswer(){
  uni.navigateTo({
    url: '/pages/mine/message/answer'
  });
}
</script>

<style lang="scss" scoped>
  .list{
    padding: 0 30rpx;
    padding-top: 30rpx;
    .item{
      width: 100%;
      display: flex;
      align-items: flex-start;
      padding-bottom: 65rpx;
      .right{
        padding-left: 24rpx;
        flex: 1;
        .foot{
          padding-top: 40rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .time, .group{
            font-weight: 400;
            font-size: 22rpx;
            color: #999999;
          }
        }
        .desc{
          margin-top: 20rpx;
          background-color: rgba($color: #818181, $alpha: 0.07);
          padding: 34rpx 20rpx;
          font-weight: 400;
          font-size: 24rpx;
          color: #000000;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .head{
          display: flex;
          align-items: center;
          .content{
            padding-top: 0;
          }
        }
        .content{
          font-weight: 400;
          font-size: 26rpx;
          color: #000000;
          padding-top: 12rpx;
        }
        .name{
          font-weight: 400;
          font-size: 26rpx;
          color: #E43222;
        }
      }
      .badgeBox{
        position: relative;
        width: 79rpx;
        
      }
      .left{
        width: 79rpx;
        height: 79rpx;
        border-radius: 79rpx;
        overflow: hidden;
      }
    }
  }
  .tab{
    width: 100%;
    padding-top: 65rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-bottom: 35rpx;
    border-bottom: 1px solid rgba($color: #979797, $alpha: 0.25);
    .item{
      flex: 1;
      text-align: center;
      font-weight: 400;
      font-size: 26rpx;
      color: #000000;
      .icon{
        width: 90rpx;
        height: 90rpx;
        margin: 0 auto;
        position: relative;
      }
      .font{
        font-weight: 400;
        font-size: 28rpx;
        color: #2B2B2B;
        text-align: center;
        padding-top: 12rpx;
      }
    }
  }
  .status{
    width: 100%;
    height: 20rpx;
    background-color: #F0F0F0;
  }
</style>